<template>
  <div class="footer">
    <ul class="line">
      <li v-for="(item, index) in firstList">
        <span v-if="index !== 0" class="point">·</span>{{item}}
      </li>
    </ul>
    <ul class="line">
      <li v-for="(item, index) in midList">
        <span v-if="index !== 0" class="point">·</span>{{item}}
      </li>
    </ul>
    <ul class="line">
      <li v-for="(item, index) in lastList">
        <span v-if="index !== 0" class="point">·</span>{{item}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Footer",
  data() {
    return {
      firstList: ["知乎专栏", "圆桌", "发现",
        "移动应用", "联系我们", "来知乎工作", "注册机构号", "Investor Relations"],
      midList: ["© 2022 知乎", "京 ICP 证 110745 号京 ICP 备 13052560 号 - 1", "京公网安备 11010802020088 号出版物经营许可证", "互联网药品信息服务资格证书（京）- 非经营性 - 2017 - 0067"],
      lastList: ["侵权举报", "网上有害信息举报专区", "儿童色情信息举报专区",
        "违法和不良信息举报：010-82716601", "举报邮箱：jubao@zhihu.com"]
    }
  }
}
</script>

<style scoped lang="scss">
.footer {
  border-top: 1px solid #f1f3f4;
  padding-top: 15px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;

  word-break:keep-all;      /* 不换行 */
  white-space:nowrap;       /* 不换行 */
  overflow:hidden;
  .line {
    color: #707070;
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0 0 5px;
    font-size: 14px;
    li {
      list-style: none;
      .point {
        margin: 0 4px
      }
    }
  }
}
</style>
